<template>
  <div>
    <el-dialog :title="formData.id?'编辑经纪':'新增经纪'" :visible="showDialog" @close="closeFn">
      <el-form ref="form" label-width="120px" :model="formData" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="formData.address" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="formData.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="封面">
          <!-- 用户头像上传 -->
          <UploadImage ref="img1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="closeFn">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addAgant, getAgantById, editAgant } from '@/api/agant'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        name: '', // 名称
        desc: '', // 描述
        email: '', // 邮箱
        phone: '', // 电话
        address: '', // 地址
        image: '' // 头像
      },
      rules: {
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '用户名长度1到10位字符' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '邮箱格式不正确' }
        ],
        address: [
          { required: true, message: '地址不能为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[2-9]\d{9}$/, message: '手机号码格式不正确' }
        ],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '描述长度1到50位字符' }
        ]
      }
    }
  },
  methods: {
    // 实现数据回显
    async getAgantList(id) {
      const res = await getAgantById(id)
      // console.log(81, res)
      this.formData = res.data
      this.$refs.img1.imgUrl = this.formData.image
    //   console.log(84, this.$refs.img1.imgUrl)
    },
    // 确定添加员工
    async submit() {
      // 校验
      await this.$refs.form.validate()
      // 判断id是否存在 存在就是编辑
      if (this.formData.id) {
        // 保存头像地址
        this.formData.image = this.$refs.img1.imgUrl
        // 调用编辑接口
        await editAgant(this.formData)
      } else {
        // 保存头像地址
        this.formData.image = this.$refs.img1.imgUrl
        // 调用新增接口
        await addAgant(this.formData)
      }
      // 点击确定后关闭弹窗
      this.closeFn()
      // 刷新员工列表
      this.$emit('updateEvent')
    },
    // 关闭弹窗
    closeFn() {
      this.$emit('update:showDialog', false)
      //   清空数据
      this.formData = {
        name: '', // 名称
        desc: '', // 描述
        email: '', // 邮箱
        phone: '', // 电话
        address: '', // 地址
        image: '' // 头像
      }
      // 移除图片地址
      this.$refs.img1.removeImg()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
